<template>
  <div class="container">
    <div style="padding: 10px 20px;">
      <NormalMaterial :currentTab="currentTab" :tabList="tabList" :formList="formList" :queryForm="queryForm" pagePwd="Words" @tabClick="tabClick" @handleQuery="handleQuery" style="margin:">
        <template slot="one">
          <div style="margin-bottom: 20px;">
            <el-button type="info" @click="exportVerval" plain v-hasPermi="[`operate:companyVerbal:export`]">
              <svg-icon iconClass="download" class="mr5"></svg-icon>导出话术
            </el-button>
          </div>
          <el-table v-loading="loading" :data="companyTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="materialName" label="话术标题" align="center" :width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="materialName" label="话术类型" align="center" :width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{verbalTypeOpt[scope.row.verbalType]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="话术内容" align="center" :min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.verbalType == 1">{{ scope.row.content }}</div>
                <div v-if="scope.row.verbalType == 2"><img :src="scope.row.materialUrl" style="height: 20px;"></div>
                <div v-if="scope.row.verbalType == 3">--</div>
              </template>
            </el-table-column>
            <el-table-column prop="sendNum" label="总发送次数" align="center" :width="110"></el-table-column>
            <el-table-column prop="createBy" label="创建人" align="center" :width="120">
              <template slot-scope="scope">
                <div class="text-color"> {{ scope.row.createBy }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" :width="200"></el-table-column>
            <el-table-column prop="examineBy" label="审核人" align="center" :width="140">
              <template slot-scope="scope">
                <div class="text-color"> {{ scope.row.examineBy }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="examineTime" label="审核时间" align="center" width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="140">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="updateTrick(scope)" v-hasPermi="['wecom:material:edit:corp']">编辑
                  </el-button>
                  <el-button type="text" @click="deleteTrick(scope)" v-hasPermi="['wecom:material:delete:corp']">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="companyPageNum" :pageSize="companyPageSize" :total="companyTotal" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
        <template slot="two">
          <div class="operate-btn">
            <div>
              <el-button type="info" @click="importVerbal" plain v-hasPermi="[`operate:companyVerbal:import`]">
                <svg-icon iconClass="uploadd" class="mr5"></svg-icon>导入话术
              </el-button>
              <el-button type="info" @click="exportVerval" plain v-hasPermi="[`operate:companyVerbal:export`]">
                <svg-icon iconClass="download" class="mr5"></svg-icon>导出话术
              </el-button>
            </div>
            <el-button type="primary" @click="addTrick" icon="el-icon-plus" v-hasPermi="[`operate:companyVerbal:add`]">新建话术</el-button>
          </div>
          <el-table v-loading="loading" :data="selfTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="materialName" label="话术标题" align="center" :width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="materialName" label="话术类型" align="center" :width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{scope.row.verbalType && verbalTypeOpt[scope.row.verbalType]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="话术内容" align="center" :min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.verbalType == 1">{{ scope.row.content }}</div>
                <div v-if="scope.row.verbalType == 2"><img :src="scope.row.materialUrl" style="height: 20px;"></div>
                <div v-if="scope.row.verbalType == 3">--</div>
              </template>
            </el-table-column>
            <el-table-column prop="sendNum" label="总发送次数" align="center" :width="110"></el-table-column>
            <el-table-column prop="createBy" label="创建人" align="center" :width="120">
              <template slot-scope="scope">
                <div class="text-color"> {{ scope.row.createBy }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" :width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="140">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="updateTrick(scope)" v-hasPermi="['wecom:material:edit']">编辑
                  </el-button>
                  <el-button type="text" @click="deleteTrick(scope)" v-hasPermi="['wecom:material:delete']">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="selfPageNum" :pageSize="selfPageSize" :total="selfTotal" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
      </NormalMaterial>
    </div>
    <el-dialog title="导入话术" :visible.sync="importVisible" width="35%">
      <div>
        <div> 1、<span class="import-template" @click="downLoadTemplate">下载模板</span> ，按格式准备需要导入的数据</div>
        <div class="import-file">
          2、上传需要导入的文件
          <el-upload :before-upload="handleBeforeUpload" :show-file-list="false" action="/">
            <el-button size="small">
              <svg-icon iconClass="upload-simple"></svg-icon>
              <span class="ml5">选择文件</span>
            </el-button>
          </el-upload>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="importVisible = false">取 消</el-button>
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入话术" :visible.sync="importResultVisible" width="35%">
      <div v-if="importErrorMsg">
        <svg-icon iconClass="info"></svg-icon>
        {{ importErrorMsg }}
      </div>
      <div v-else>
        <svg-icon iconClass="success"></svg-icon>
        成功
        <div class="success-msg">{{ importSuccessMsg }}</div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="importResultVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteCompanyVerbal, deleteVerbal, exportVervalExcel, getVerbalList, importVerbal } from '@/api/operate/verbalTrick'

export default {
  name: 'Words',
  data() {
    return {
      tabList: [
        { label: '企业话术库', vlaue: '0', slotName: 'one' },
        { label: '个人话术库', vlaue: '1', slotName: 'two' },
      ],
      queryForm: {
        materialName: '',
      },
      searchNameA: '',
      searchNameB: '',
      formList: [
        {
          label: '话术内容或标题',
          value: '',
          prop: 'materialName',
          type: 'INPUT',
          emunName: '',
        },
      ],
      currentTab: '0',
      loading: false,
      companyTableList: [],
      companyTotal: 0,
      companyPageNum: 1,
      companyPageSize: 20,
      selfTableList: [],
      selfTotal: 0,
      selfPageNum: 1,
      selfPageSize: 20,
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      importVisible: false,
      importResultVisible: false,
      importErrorMsg: '',
      importSuccessMsg: '',
      file: '',
      verbalTypeOpt: {
        1: '文本',
        2: '图文',
        3: '视频',
      }
    }
  },
  created() {
    this.currentTab = this.$route.query.is_person ? this.$route.query.is_person + '' : '0'
    this.handleQuery()
  },
  methods: {
    tabClick(val) {
      this.categoryId = ''
      this.queryForm.materialName = val == '0' ? this.searchNameA : this.searchNameB
      this.currentTab = val
      this.handleQuery(this.categoryId)
    },
    handleQuery(categoryId, pageNum) {
      this.loading = true
      this.categoryId = categoryId
      let tempNum = this.currentTab == '0' ?  this.companyPageNum : this.selfPageNum
      let tempSize = this.currentTab == '0' ?  this.companyPageSize : this.selfPageSize
      getVerbalList({
        pageNum: pageNum || tempNum,
        pageSize: tempSize,
        mediaType: 8,
        levelType: +this.currentTab,
        categoryId: this.categoryId,
        search: this.queryForm.materialName,
      }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          const { rows, total } = res.data
          if (this.currentTab == '0') {
            this.searchNameA = this.queryForm.materialName
            this.companyTableList = rows || []
            this.companyTotal = total || 0
          } else {
            this.searchNameB = this.queryForm.materialName
            this.selfTableList = rows || []
            this.selfTotal = total || 0
          }
        }
      })
    },
    handleSizeChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = 1
        this.companyPageSize = val
      } else {
        this.selfPageNum = 1
        this.selfPageSize = val
      }
      this.handleQuery(this.categoryId)
    },
    handleCurrentChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = val
      } else {
        this.selfPageNum = val
      }
      this.handleQuery(this.categoryId)
    },
    // 导入话术
    importVerbal() {
      this.file = ''
      this.importVisible = true
    },
    nextStep() {
      if (this.file) {
        this.importResultVisible = true
      } else {
        this.$message.info('请先上传文件')
      }
    },
    handleBeforeUpload(file) {
      let formData = new FormData()
      formData.append('file', file)
      importVerbal(formData)
        .then(res => {
          this.file = file
          res.code === 200 && res.data === 'Y' && (this.importErrorMsg = res.msg)
          res.code === 200 && res.data !== 'Y' && (this.importSuccessMsg = res.msg)
          this.importVisible = false
          this.importResultVisible = true
          this.handleQuery(this.categoryId)
        })
      return false
    },
    // 下载模板
    downLoadTemplate() {
      window.open('https://ark-1308072185.cos.ap-shanghai-fsi.myqcloud.com/scrm/templates/%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF_%E8%AF%9D%E6%9C%AF.xlsx')
    },
    // 导出话术
    exportVerval() {
      const params = {
        ...this.form,
        mediaType: 8,
        categoryId: this.categoryId
      }
      exportVervalExcel(params)
        .then(res => {
          const elink = document.createElement('a')
          elink.download = '话术.xlsx'
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(res)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        })
    },
    addTrick() {
      this.$router.push({
        name: 'AddTrick',
        query: { is_person: 1 }
      })
    },
    updateTrick(scope) {
      this.$router.push({
        path: 'UpdateTrick',
        query: {
          id: scope.row.id,
          levelType: +this.currentTab,
          is_person: +this.currentTab
        }
      })
    },
    async deleteTrick(scope) {
      try {
        this.tableLoading = true
        const api = this.currentTab === '0' ? deleteCompanyVerbal : deleteVerbal
        let res = await api(scope.row.id)
        this.tableLoading = false
        if (res.code === 200) {
          this.$message.success(res.msg || '操作成功')
        }
        this.handleQuery(this.categoryId)
      } catch (error) {
        this.tableLoading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
  .operate-btn{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
.import-template {
  color: #082aff;
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 30px;
  display: inline-block;
}
.import-file {
  display: flex;
  align-items: center;

  >div {
    margin-left: 10px;
  }
}
.success-msg {
  margin-top: 10px;
}
</style>
